<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	/**{margin:0;padding: 0;list-style: none;text-decoration: none;}
	#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
	ul{background: #aaa}
	ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
	ul li:hover{background: #cea;}
	ul li ul li{float: none;}
	ul li ul{position: absolute;top:40px;left: 0; display:none;}
	ul li ul li:hover{background: red;}*/
		 .nav ul{
				background: #48D1CC;
				list-style: none;
			
				height: 60px;
				font-family: "微软雅黑";
				padding-left: 90px;
				padding-top: 26px;
				font-size: 25px;
				margin: 0 auto;
			}
			.nav ul li{
				float: left;
				margin: 0 20px;
				 position: relative;
		/*		width: 200px;*/
			/*	width: 50px;*/
			}
			.nav ul li ul{
			/*	position: absolute;top:40px;left: 0; */
				font-size: 18px;
				display:none;
				height: 120px;
				position: absolute;top:30px;left: 0;
				}
			.nav ul li ul li{
				float: none;
				position: relative;
				right: 100px;
				width: 120px;
				
				}
			.nav ul li ul li:hover{
				background: #696969;
			}
/*			***********************************/
			.nav a:link,.nav a:visited{
				color: #FFF;
				text-decoration: none;
			}
			.nav a:hover{
				color: #696969;
				font-weight: bold;
				transition-duration: 3s;
			}
			
</style>
</head>
<body>
	<div class="dfxh"></div>
<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="公告.html">公告</a></li>
					<li onmouseover="show(this)" onmouseout="hide(this)"><a href="赛事活动.html">赛事活动</a>
					<ul class="saishihuodong">
<li><a href="#">会员联赛</a> </li>
<li><a href="#">领导干部赛</a></li>
<li><a href="#">市长杯</a></li>
<li><a href="#">县长杯</a></li>
<li><a href="#">省级友谊赛</a></li>

						</ul>
				</li>
					<li onmouseover="show(this)" onmouseout="hide(this)"><a href="中国乒乓球协会会员注册系统.html">会员服务</a>
						<ul>
<li><a href="#">注册个人会员</a></li>
<li><a href="#">注册团体会员</a></li>
<li><a href="#">比赛报名系统</a></li>
<li><a href="#">成绩查询系统</a></li>

</ul>
					</li>
					<li><a href="新闻中心.html">新闻中心</a></li>
					<li onmouseover="show(this)" onmouseout="hide(this)"><a href="官方文件.html">官方文件</a>
				<ul>
<li><a href="#">法律法规</a> </li>
<li><a href="#">管理办法</a></li>
<li><a href="#">日程规划</a></li>


</ul>
					</li>
					<li onmouseover="show(this)" onmouseout="hide(this)"><a href="组织机构.html">组织机构</a>
						<ul>
<li><a href="#">机构简介</a></li>
<li><a href="#">联系方式</a></li>
</ul>
					</li>
					<li onmouseover="show(this)" onmouseout="hide(this)"><a href="地方协会.html">地方协会</a>
						<ul>
<li><a href="#">上海</a> </li>
<li><a href="#">北京</a></li>
<li><a href="#">武汉</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">广州</a></li>


</ul>
					</li>
				</ul>	
				</div>
<script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。
ul.style.display="block";
// 关键三：当鼠标划过li时，其子元素ul标签的display为block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// 关键四：当鼠标划出li时，其子元素ul的display为none
}
</script>
</body>
</html>